<template>
    <span>v-model 默认传值</span>
    <childVue v-model="value">
        <template #prefix>
            <span>子组件值：</span>
        </template>
        <template #suffix>
            <span>结果值：{{value}}</span>
        </template>
    </childVue>

    <br><br>
    <span>单个组件中，绑定多个输入值</span>
    <a-input type="text" v-model:value="value2" />
    <a-input type="text" v-model:value="value3" />
    <childVue2 v-model:Arg1="value2" v-model:Arg2="value3" v-model:Result="value4" />
    <span>结果值：{{ value4 }}</span>

    <br><br>
    <span>带修饰符的 v-model</span>
    <child3Vue v-model:title="value5" />
    <span>不传修饰符: {{ value5 }}</span>
    <br><br>
    <child3Vue v-model:title.smile="value6" />
    <span>传入修饰符 smile: {{ value6 }}</span>
    <br><br>
    <child3Vue v-model:title.cry="value7" />
    <span>传入修饰符 cry: {{ value7 }}</span>
    <br><br>
</template>
<script setup>
import { ref } from 'vue';
import childVue from './child.vue';
import childVue2 from './child2.vue';
import child3Vue from './child3.vue';
// 默认传值
const value = ref();

// 传多个参数进行绑定;
const value2 = ref();
const value3 = ref();
const value4 = ref();

// 带修饰符的参数绑定
const value5 = ref();
const value6 = ref();
const value7 = ref();
</script>
<style lang="less" scoped>

</style>